<template>
  <div class="user-container">
    <m-pull-refresh @refReshSend='refReshSend'>
      <template v-slot>
        <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
        <div class="top-bg">
          <div>
            <img :src="userImg" alt="">
          </div>
          <van-uploader :after-read="afterRead"/>
          <p class='top-bg-p'>敬请期待更多功能...</p>
          <!-- <van-popover
            class="head-pop"
            v-model:show="showPopover"
            teleport="#app"
            :actions="actions"
            @select="popSelect"
          >
        <template #reference>
          <p class="head-text">
            <b>En</b>
          </p>
        </template>
      </van-popover> -->
        </div>
        <p class='user-func-title'>{{i18n.$t('use')}}</p>
        <div class='user-func-list'>
          <template v-for="item in userFuncList">
            <div :key='item.key' v-if='item.isShow' @click='goToItem(item.route)'>
                <p>
                <van-icon :name='item.icon'/>
                <span>{{i18n.$t(item.text)}}</span>
              </p>
            </div>
          </template>
        </div>
      </van-list>
      </template>
    </m-pull-refresh>
    <van-popup position='top' v-model:show="concatActive" overlay-class='concat-pupop'>
      <img class='concat-img' src="./../../assets/images/concat.jpg" />
    </van-popup>
    <!-- <van-popup position='bottom' v-model:show="concatActive" overlay-class='concat-pupop'>
      <img class='concat-img' src="./../../assets/images/concat.jpg" />
    </van-popup> -->
  </div>
  <m-footer :route="childRoute" ref="foot_bar"></m-footer>
</template>

<script lang="ts">
import { useI18n } from '@/i18nPlugin'
import { ref,toRefs, defineComponent, reactive,onMounted } from 'vue'

//缓存
import { useStore } from 'vuex'

//本地数据
import commonData from '@/data'

//业务组件
import { MFooter,MPullRefresh } from '@/components'

//路由
import { useRouter } from 'vue-router'
//接口
import { setUserImg,getUserData } from '@/config/api'
//图片
import defaultImg from '@/assets/images/user_img.png'

export default defineComponent({
  nem: 'User',
  components: {
    MFooter,
    MPullRefresh
  },
  setup: () => {
    // userFuncList
    const store = useStore() // 使用useStore方法
    const router = useRouter()
    const i18n = useI18n()
    const data = reactive({
      childRoute: 'user', //footer高亮状态
      loading: false,
      finished: false,
      actions:[{ text: '中文' }, { text: 'English' }],
      showPopover:ref(false),
      concatActive: false,
      userImg:defaultImg,
      userFuncList: [{}]
    })
    let popSelect = (item: any) => {
      const locale = item.text === '中文' ? 'en' : 'es'
      i18n.locale.value = locale
    }
    const onLoad = () => {
      data.loading = false
    }
    const afterRead = (file:any) => {
      (<any>window).utils.dealImage(file.content,100,(base64:string) => {
        let req = {
          titleImg: base64,
          userCode: store.state.userData.userCode
        }
        setUserImg(req).then((res:any) => {
          console.log(res)
          if(res.data.resCode === 1000) {
            data.userImg = base64
          }
        })
      })
    };
    const goToItem = (item:string) => {
      if(item === 'wechart') {//联系开发
        data.concatActive = true
      }else if(item === 'goOut') {
        (<any>window).utils.ui.Toast('已退出登录！')
        let initUser = {
          key:'userData',
          value: {
            titleImg: "",
            userCode: "",
            userName: "",
          }
        }
        store.commit('MUTATIONS_SET_STATE',initUser)
        store.dispatch('ACTIONS_CHANGE_FOOTER_BAR',false)
        data.userFuncList.forEach((item:any) => {
          if(item.route == 'goOut') {
            item.isShow = false
          }
          if(item.route == 'login') {
            item.isShow = true
          }
        })
        data.userImg = defaultImg
        // setTimeout(()=>{
        //   router.replace('/Login')
        // },1000)
      } else if(item === '/collect'){
        let obj = {
          key:'collectBackType',
          value:'/User'
        }
        store.commit('MUTATIONS_SET_STATE',obj)
          router.replace(item)
      }else if(item === 'clear'){
        (<any>window).utils.ui.Toast('已清空您的阅读记录！')
        let newsDetails = {
          key:'newsDetails',
          value:[]
        }
        store.commit('MUTATIONS_SET_STATE',newsDetails)
        let newsList = {
          key:'newsList',
          value:[]
        }
        store.commit('MUTATIONS_SET_STATE',newsList)
      } else {
        router.replace(item)
      }
    }
    const getUserDataFunc = () => {
      if(store.state.userData.userCode) {
        let req = {
          userCode: store.state.userData.userCode
        }
        getUserData(req).then((res)=> {
          // console.log(res)
          if(res.data.resCode === 1000) {
            data.userImg = res.data.resData.titleImg || defaultImg
          }
        })
      } else {
        data.userImg = defaultImg
      }
    }
    const refReshSend = ()=> {
      getUserDataFunc()
    }
    onMounted(()=> {
      data.userFuncList = []
      let arr = commonData.userFuncList
      arr.forEach((item:any) => {
        item.isShow = true
        if(item.route == 'goOut') {
          item.isShow = store.state.userData.userCode != ''
        }
        if(item.route == 'login') {
          item.isShow = store.state.userData.userCode == ''
        }
      })
      data.userFuncList = arr
      console.log(JSON.parse(JSON.stringify(arr)))
      getUserDataFunc()
    })
    return { ...toRefs(data), i18n, onMounted, onLoad,goToItem,popSelect,afterRead,getUserDataFunc,refReshSend }
  },
})
</script>

<style scoped lang="scss">
.user-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // background: url('./../../assets/images/user_bg.png') no-repeat;
  // opacity: 0.1;
  // filter:alpha(opacity=50)!important;
  // opacity:0.95;
  // background-size: 100% 100%;

  :deep(.van-pull-refresh__track) {
    height: 100vh; background: #f3f3f3;
    padding-top: 10px;
  }
  .top-bg {
    // background: url('./../../assets/images/user_bg.png') no-repeat;
    // background-size: 100% 100%;
    width: 95%;
    margin: 0 auto 10px auto;
    height: 180px;
    display: flex;
    background: #fff;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    position: relative;
    .top-bg-p {
      color: #333;
      font-size: 14px;
    }
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    .head-text {
      color: $theme;
    }
    .van-uploader {
      position: absolute;
      left: 15%;
      z-index: 100;
      :deep(.van-uploader__upload) {
        width: 100px;
        height: 100px;
        opacity: 0;
      }
    }
  }
  .user-func-title {
    background: #fff;
    margin: 0 2.5%;
    font-size: 20px;
    padding: 20px;
  }
  .user-func-list {
    background:#fff;
    width: 95%;
    margin: 0 auto 10px auto;
    position: relative;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    div {
      width: 33%;
      text-align: center;
      height: 80px;
      display: flex;
      align-items: center;
      // line-height: 80px;
      font-size: 16px;
      padding: 0 5%;
      color: #333;
      // border-bottom: 1px solid #ccc;
      // color: $theme;
      // font-weight: bold;
      p {
        width: 100%;
        i {
          color: #333;
          // font-weight: bold;
          // margin-right: 8px;
          font-size:18px;
        }
        span {
          display: block;
          margin-top: 5px;
          font-size: 13px;
        }
      }
    }
  }
}
.concat-img {
  width: 80%;
}
:deep(.van-popup--top){
  width: 100%;
  text-align: center;
    background:transparent;
  }
</style>
